<template>
  <div class="table">
    <table>
      <thead>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-if="myinfo.length==0">
          <td colspan="4">暂无信息</td>
        </tr>
        <tr v-for="(item,index) in myinfo" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.title}}</td>
          <td>{{item.con}}</td>
          <td>
            <button @click="udInfo(index)">修改</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ["myinfo"],
  methods:{
    // 点击修改按钮
    udInfo(index){
      this.$emit("udInfo",index);
    },
    del(index){
      this.$emit("del",index)
    }
  }
};
</script>

<style>
table,
th,
td {
  text-align: center;
  border: 1px solid #000;
}
table {
  width: 800px;
  margin: 0 auto;
}
.table{
  width: 1200px;
  height: 500px;
  border: 2px solid blue;
  box-sizing: border-box;
  margin-top: 5px;
}
</style>